<template>
    <div class="product">
        <div class="container">
            <!-- BEGIN product-swiper-box -->
            <div class="product-swiper-box">
                <swiper class="swiper" v-bind:options="swiperOption">
                    <swiper-slide  v-for="(item,product) in slideList" v-bind:key="product">
                        <a v-bind:href="'/#/product/'+item.id"><img v-bind:src="item.img"></a>
                    </swiper-slide>
                    <!-- Optional controls -->
                    <div class="swiper-pagination"  slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
            </div>
            <!-- END product-swiper-box -->
            <!-- BEGIN product-list -->
            <div class="product-list">
                <div class="title-section text-center">
                    <h1 class="product-title">热门技能</h1>
                    <ul class="list-inline" :v-model="text">
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="all">全部</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="sport">运动</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="music">乐器</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="language">语言</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="computer">计算机</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="art">艺术设计</a></li>
                        <li class="list-li"><a href="#" title="" data-filter="*" @click="others">其他</a></li>
                    </ul>
                </div>
            </div>
            <!-- END product-list -->
            <!-- BEGIN product-detail-list -->
            <div class="product-detail-list row">
                <div class="item col-xs-6 col-md-3" v-for="(item,product) in list" v-bind:key="product">
                    <div>
                        <a href=""><img width="100%" :src="item.src" alt="" class="nature"/></a>
                        <a href=""><div>{{item.group}}</div></a>
                        <a href=""><div>&yen; {{item.mouth}}/天</div></a>
                  </div>
                </div>
            </div>
            <!-- END product-detail-list -->
        </div>
    </div>
</template>
<script>
    // require styles
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'
    export default {
        name:'product',
        components:{
            swiper,
            swiperSlide
        },
        data(){
            return {
                text:'',
                swiperOption:{
                    autoplay:true,
                    loop:true,
                    effect:'cube',
                    cubeEffect: {
                        slideShadows: true,
                        shadow: true,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
                slideList:[
                    {
                        id:'1',
                        img:'images/slider/product-slide1.jpg'
                    },
                    {
                        id:'2',
                        img:'images/slider/product-slide2.jpg'
                    }
                ],
                list:[
                    {
                        id:0,
                        group:'乐器/吉他初级入门教学',
                        mouth:10,
                        speed:'全部乐器',
                        src:'images/jineng/art/guitar/guitar7.jpg'
                    },
                    {
                        id:1,
                        group:'艺术设计/刀画基础',
                        mouth:15,
                        speed:'全部艺术设计',
                        src:'images/jineng/art/sword_painting/sword-painting.jpg'
                    },
                    {
                        id:2,
                        group:'乐器/零基础拇指琴教学',
                        mouth:10,
                        speed:'全部乐器',
                        src:'images/jineng/art/thumb_piano/拇指琴1.jpg'
                    },
                    {
                        id:3,
                        group:'运动/篮球入门教学',
                        mouth:15,
                        speed:'全部运动',
                        src:'images/jineng/sports/basketball/篮球1.jpg'
                    },
                    {
                        id:4,
                        group:'语言/西班牙语日常用语教学',
                        mouth:20,
                        speed:'全部语言',
                        src:'images/jineng/language/西班牙语1.jpg'
                    },
                    {
                        id:5,
                        group:'运动/游泳基础教学（含理论知识）',
                        mouth:15,
                        speed:'全部运动',
                        src:'images/jineng/sports/swimming/swim-2.jpg'
                    },
                    {
                        id:6,
                        group:'计算机/Excel基础教学',
                        mouth:18,
                        speed:'全部计算机',
                        src:'images/jineng/computer/excel/excel1.jpg'
                    },
                    {
                        id:7,
                        group:'乐器/二胡入门技巧',
                        mouth:15,
                        speed:'全部乐器',
                        src:'images/jineng/art/erhu/二胡1.jpg'
                    },
                    {
                        id:8,
                        group:'艺术设计/PS入门基础',
                        mouth:17,
                        speed:'全部艺术设计',
                        src:'images/jineng/computer/ps/ps1.jpg'
                    },
                    {
                        id:9,
                        group:'语言/意大利语日常用语',
                        mouth:15,
                        speed:'全部语言',
                        src:'素材图/意大利语1.jpg'
                    },
                    {
                        id:10,
                        group:'计算机/SPSS数据分析基础',
                        mouth:20,
                        speed:'全部计算机',
                        src:'素材图/spss1.jpg'
                    },
                    {
                        id:11,
                        group:'运动/乒乓球速成教学',
                        mouth:20,
                        speed:'全部运动',
                        src:'素材图/乒乓1.jpg'
                    },
                ]
            }
        },
        methods:{
            search(text){//搜索
                    var newList=[]
                    this.list.forEach(item =>{
                    if(item.speed.indexOf(text) !=-1){
                        newList.push(item)
                    }
                    })
                    return newList
                        },
            all:function(){
                    this.text='全部'
                    },
            sport:function(){
                    this.text='运动'
                    },
            music:function(){
                    this.text='乐器'
                    },
            language:function(){
                    this.text='艺术设计'
                    },
            computer:function(){
                    this.text='计算机'
                    },
            art:function(){
                    this.text='艺术设计'
                    },
            others:function(){
                    this.text='其他'
                    },
            }
    }
</script>
<style lang="scss">
    .product{
        .container{
            height: auto;
            .product-swiper-box{
                .swiper-container{
                    margin-top: 4rem;
                    height: 400px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .product-list{
                .title-section{
                    padding-top: 4rem;
                    .product-title{
                        text-align: center;
                        margin: 0 auto;
                        color: black;
                    }
                    .list-inline{
                        display: flex;
                        flex-direction: row;
                        text-align: center;
                        margin: 0 auto;
                        font-size: medium;
                        width: 40rem;
                    }
                    .list-li{
                        padding: 1.5rem;
                        a{
                            color: #2d81bd;
                        }
                    }
                }
            }
            .product-detail-list{
                .item{
                    display: flex;
                    flex-direction: row;
                    a{
                        color: #2d81bd;
                        .nature{
                            left: 0;
                            top: 0; 
                            width: 100%;
                            height: 160px;
                            padding: 10px;
                            background-color: #f0f0f0;
                            border-radius: 5px;
                        }
                    }
                    a:hover{
                        color: #E8946F;
                    }
                }
            }
        }
    }
</style>